import React from 'react';
import { withStyles, makeStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import Typography from "@material-ui/core/Typography";

const font_size = 20;
const temp = makeStyles({
  body1Select: {
    backgroundColor: "lightgreen",
  },

  title: {
    flex: '1 1 100%',
  },

  body1NoSelect: {

  },

  body2Select: {
    backgroundColor: "lightpink",
  },

  body2NoSelect: {

  },

  border2: {
    border: "none",
    fontSize: font_size,
    width: "60px"
  },
  border1: {
    fontSize: font_size,
    width: "60px"
  }
});

let facN = 10;

const StyledTableCell = withStyles((theme) => ({
  head: {
    backgroundColor: theme.palette.common.black,
    color: theme.palette.common.white,
    fontSize: font_size,
  },
  body: {
    backgroundColor: (props) =>  props.backgroundColor,
    fontSize: font_size,
  },
}))(TableCell);

const StyledTableRow = withStyles((theme) => ({
  root: {
    '&:nth-of-type(odd)': {
      backgroundColor: theme.palette.action.hover,
    },
  },
}))(TableRow);


const generate = (n) => {
  let list = [1]
  for(let i = 1; i <= n; i++) {
    list.push(i * list[i - 1]);
  }
  list.splice(0, 1);
  return list;
}

const generateList = (n) => {
  let list = []
  for (let i = 1; i <= n; i++) {
    list.push(i);
  }
  return list;
}

const generateDict = (name, n) => {
  let dict = new Map();
  dict.set("name", name);
  let list = generate(n);
  for (let i = 1; i <= n; i ++) {
    dict.set(i, list[i-1].toString());
  }
  return dict;
}

const generateDictForQuestion = (name, listRes) => {
  let list = [];
  list.push(name);
  listRes.map((x)=>list.push(x));
  return list;
}




const generateTable = (row) => {

  row.splice(0, 1);

  return row;
}

const useStyles = makeStyles({
  table: {
    // minWidth: "100px",
    // // display: "flex",
    width: "100%",
    margin: "auto",
    boxShadow: "none"
  },
});

export default function TableForSequential(props) {
  const classes = useStyles();

  const mod = temp();
  console.log(props.nowIndexRes)


    let listN = [...props.listN];
    let rows = generateDictForQuestion("Value", [...props.listRes]);
    // if (!props.reset && listN.length !== 0 )
    return (

    <TableContainer
        // id = {props.tableId}
        component={Paper}
    //     style={{width: "auto",
    // margin: "auto",
    // boxShadow: "none"}}
        className={classes.table}
    >

      <Table className={classes.table} aria-label="customized table" >
        <TableHead>
          <TableRow>

            <StyledTableCell align="center" className={`${mod.border1}`}>Index</StyledTableCell>
            {listN.map(x=>(<StyledTableCell  align="center">{x}</StyledTableCell>))}

          </TableRow>
        </TableHead>
        <TableBody>


              <StyledTableRow key={rows[0]}>
                  <StyledTableCell className={`${mod.border2}`} component="th" scope="row" align="center">
                    {rows[0]}
                  </StyledTableCell>

                 {generateTable(rows).map((x, i)=>(<TableCell
                     className={`${ mod.border1} ${(i === props.nowIndexRes ) ? props.flag ? mod.body1Select : mod.body2Select : mod.body1NoSelect}`
                 }  align={"center" }>{x}</TableCell>))}
            </StyledTableRow>

        </TableBody>
      </Table>
    </TableContainer>

  );


}
